<template>
  <div class="m_wrap">
    <div class="m_introduce">
      <div class="m_i_top">
        <div class="touxiang"><img src="../assets/img/tx.png"></div>
        <div class="m_i_name">Anther</div>
        <div class="m_i_cont">Beautiful Lucky</div>
      </div>
      <div class="m_i_bottom">
        <router-link to="/follow">
          <div class="follow">关注</div>
        </router-link> 
        <router-link to="/fans">
          <div class="fans">粉丝</div>
        </router-link> 
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MineItem1",
  data() {
    return {
      
    }
  }
};
</script>
<style scoped  lang="less">
  .m_wrap{
    margin: 40px 10px;
    font-size: 0.43rem;
    .m_introduce{
        float: left;
        width: 100%;
        background-color: white;  
        border-radius: 0.5em;
        box-shadow: 0 0 10px 3px rgb(187, 179, 179);
      .m_i_top{
        margin-bottom: 20px;
      }
      .m_i_top,.m_i_bottom{
        display: block;
        float: left;
        width: 100%;
        .m_i_name,.m_i_cont{
          float: left;
          width: 40%;
          margin-left: 20px;
        }
        .m_i_name{
          margin-top: 20px;
        }   
        .touxiang{
          float: left;
          display: block;
          width: 96px;
          border-radius: 0.5em;
          background-color: black;
          margin-top: -15px;
          margin-left: 15px;
          img {
            width: 96px;
            height: 96px;
          }
        }
        .follow,.fans{
          float: left;
          width: 50%;
          height: 2rem;
          justify-content:center;
          align-items:Center;
          display: flex;
        }
      }
    }
  }

</style>